<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
            border: 50px black solid;
            margin-left: 50px;
            position: relative;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
            position: absolute;
            left: 50px;
            top: 50px;
        }


    </style>
    <script src="../node_modules/jquery/dist/jquery.js"></script>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
<button>获取</button>
<button>设置</button>
<script>
     $(function () {
        $("button").eq(0).click(function () {
            //获取元素的高度
            // height([val|fn])
            // console.log($(".father").width());//打开
            // width([val|fn])
            // console.log($(".son").width());//打开
            //获取匹配元素在当前视口的相对偏移。(人话:就是你这个元素距离浏览器边边的距离)
            // offset([coordinates])
            //.son这个div距离浏览器的左边距离是多少
            // console.log($(".son").offset().left);
            // position()
            //距离定位元素的偏移量
            console.log($(".son").position().left);
        });
         $("button").eq(1).click(function () {
             //设置元素的高度以及宽度
             // $(".father").width("500");

             //设置元素距离浏览器的偏移量
             // $(".son").offset({
             //     left:"10"
             // });
             //注意 position不能更改
             // $(".son").position({left: "20"})
             //但是可以通过.css
             $(".son").css({
                 left: "10px"
             });

         });
     });
</script>
</body>
</html>